<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>路由的练习</title>
	</head>
	<body>
		<div id="app">
			<router-link to="/user">用户</router-link>
			<router-link to="/dog">狗狗</router-link>
	
			<router-view></router-view>
		</div>
		<!-- 3.定义组件的模板 -->
		<template id="userTem">
			<div style="background-color: #A52A2A;width: 600px;height: 100px;">
				<h3>这是用户显示信息的地方</h3>
			</div>
		</template>
		<template id="dogTem">
			<div style="background-color: blueviolet;width: 600px;height: 100px;">
				<h3>这是后台数据的地方</h3>
				
				<router-link to="/samo">用户数据</router-link>
				<router-link to="/hashiqi">哈士奇</router-link>
				
				<router-view></router-view>
				
				
			</div>
		</template>
		<template id="samo">
			<div style="width: 600px;height: 300px;background-color: chocolate;">
				<table border="1" align="center" align="center">
					<tr align="center">
						<th>id</th>
						<th>姓名</th>
						<th>性别</th>
						<th>信息</th>
						<th>住址</th>
						<th>城市</th>
						<th>操作</th>
						</tr>
					<tr v-for="user in userList">
						<td v-text="user.id"></td>
						<td v-text="user.name"></td>
						<td v-text="user.sex"></td>
						<td v-text="user.userInfo"></td>
						<td v-text="user.addrs"></td>
						<td v-text="user.city"></td>
						<td>
							<button>修改</button>
							<button>删除</button>
						</td>
						</tr>
				</table>
				
			</div>
		</template>
		
		
		<script src="../js/vue.js"></script>
		<script src="../js/vue-router.js"></script>
		<script src="../js/axios.js"></script>
		
		<script>
		
		
		//2.定义组件
		let user={
			template: "#userTem"
		}
		
		let dog={
			template: "#dogTem"
			
		}
		
		let samo={
			data(){
				return{
					userList: []
				}
				
			},
			
		    methods: {
			async	getAll(){
				let {data: result}=await axios.get("http://localhost:8090/getAll")
					//console.log(result)
					this.userList=result
					
				}	
		
		},
		
		created() {
			this.getAll()
		},
		
			template: "#samo"
		}
		let hashiqi={
			template: `<h1>哈士奇最难搞</h1>`
		}
	
		//4创建路由的对象并制定规则
		let router=new VueRouter({
			routes: [
				{path:"/",redirect:user},
				{path: "/user",component: user},
				{path: "/dog",component: dog,
				children: [
					{ path: "/samo",component:samo },
					{path: "/hashiqi",component:hashiqi}
					
				]}
			]	
		})
		//1.定义vue的对象，用来展示数据
		const app=new Vue({
			el: '#app',
			data: {
				userList: []
					
			},
			
			//定义一个路由对象
			router,
			methods: {
				//获得后台用户的所有数据
			/* async	getAll(){
				let {data: result}=await axios.get("http://localhost:8090/getAll")
					console.log(result)
					this.userList=result
					
				}	 */
			},
			created() {
				// this.getAll()
			}
			
			
		})
		</script>
		
	</body>
</html>
